<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="edu.zjut.sjq.bean.User" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  User user= (User) session.getAttribute("user");

%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>作品 | 作品名称</title><!-- 显示作品的具体名称-->
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/app.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/ie/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/respond.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/excanvas.js"></script>
  <![endif]-->
  <style>
    .padder-v {
      padding-top: 10px;
      padding-bottom: 0px;
    }
    .media{
      margin-top: 0;
    }
    .starStyle{
      color:#FFD700;
    }
    .layui-layer-shade{
      z-index:19891020;
      background-color:#000;
      opacity:0.3; filter:alpha(opacity=30);
    }

  </style>
</head>
<body class="">

  <section class="vbox">
      <section class="scrollable wrapper-lg">

         <div class="row">

            <div class="col-sm-8">

                <!-- ／作品简介及相关tags -->
                <div class="panel">

                  <!-- video player -->
                  <div id="jp_container_1">
                    <div class="jp-type-single pos-rlt">
                      <div id="jplayer_1" class="jp-jplayer jp-video"></div>
                      <div class="jp-gui">
                        <div class="jp-video-play">
                          <a class="fa fa-5x text-white fa-play-circle"></a>
                        </div>
                        <div class="jp-interface bg-info padder">
                          <div class="jp-controls">
                            <div>
                              <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                              <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                            </div>
                            <div class="jp-progress" >
                              <div class="jp-seek-bar dker" id="hahaha">
                                <div class="jp-play-bar dk">

                                </div>
                                <div class="jp-title text-lt" style="width: 100%;">
                                  <ul>
                                    <li></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm">
                              <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                              <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                            </div>
                            <div class="hidden-xs hidden-sm jp-volume">
                              <div class="jp-volume-bar dk">
                                <div class="jp-volume-bar-value lter"></div>
                              </div>
                            </div>
                            <div>
                              <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                              <a class="jp-restore-screen" title="restore screen" onclick="changeSize()"><i class="fa fa-compress text-lt"></i></a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="jp-no-solution hide">
                        <span>Update Required</span>
                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                      </div>
                    </div>
                  </div>
                  <!-- / video player -->
                  <!-- 作品简介及相关tags -->
                  <div class="wrapper-lg">
                    <h2 class="m-t-none text-black">${theArticle.title}</h2><!-- 对应作品简介 -->
                    <div class="post-sum">
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${theArticle.description}
                    </div>
                    <div class="line b-b"></div>
                    <div class="text-muted">
                      <i class="fa fa-user icon-muted"></i> by <a href="#" class="m-r-sm">${theArticle.authorName}</a>
                      <i class="fa fa-clock-o icon-muted"></i> ${theArticle.createTime}
                      <a href="#" class="m-l-sm"><i class="fa fa-comment-o icon-muted"></i> ${theArticle.commentNum} 条评论  </a>
                      <!-- 点赞-->
                        <c:choose>
                          <c:when test="${theArticle.isChooseLike==0}">
                            <a class="btn  pull-right" data-toggle="button" onclick="like1(${theArticle.id})" >
                              <i class="fa fa-heart-o text"></i>
                              <i class="fa fa-heart text-active text-danger"></i>
                              <span id="num1${theArticle.id}">${theArticle.likeNum}</span>

                            </a>
                          </c:when>
                          <c:otherwise>
                            <a class="btn  pull-right active" data-toggle="button" onclick="like2(${theArticle.id})">
                              <i class="fa fa-heart text-active text-danger"></i>
                              <i class="fa fa-heart-o text"></i>
                              <span id="num2${theArticle.id}">${theArticle.likeNum}</span>
                            </a>
                          </c:otherwise>
                        </c:choose>

                      <!-- 打分区域 -->
                      <!-- 评分的五角星 打完分后 分数变化 若不可评分则点击星星无变化 若可以评分则点击星星后变为实心 记分情况和打分方法参照各类app的评分情况-->
                      <%if (user!=null && user.getRole()==1){%>
                        <div style="margin-top: 30px;">
                          <c:choose>
                            <c:when test="${theArticle.avgGreat > 0}">
                              <span id="hasSpan">已评分</span><i class="fa fa-star icon-muted" style="color: #FFD700"></i> &nbsp;
                              <fmt:formatNumber type="number" value="${theArticle.avgGreat}" pattern="0.0" maxFractionDigits="1"/>
                            </c:when>
                            <c:otherwise>
                              <span id="waitSpan">未评分</span><i class="fa fa-star icon-muted" id="waitStar"></i> &nbsp;<span id="waitGrade">0.0</span>
                            </c:otherwise>
                          </c:choose>
                          <div class="pull-right" style="font-size: 18px;">评分:&nbsp;&nbsp;
                            <i class="fa fa-star-o" onclick="mark(1)" id="mark1"></i>
                            <i class="fa fa-star-o" onclick="mark(2)" id="mark2"></i>
                            <i class="fa fa-star-o" onclick="mark(3)" id="mark3"></i>
                            <i class="fa fa-star-o" onclick="mark(4)" id="mark4"></i>
                            <i class="fa fa-star-o" onclick="mark(5)" id="mark5"></i>
                            <i class="fa fa-star-o" onclick="mark(6)" id="mark6"></i>
                            <i class="fa fa-star-o" onclick="mark(7)" id="mark7"></i>
                            <i class="fa fa-star-o" onclick="mark(8)" id="mark8"></i>
                            <i class="fa fa-star-o" onclick="mark(9)" id="mark9"></i>
                            <i class="fa fa-star-o" onclick="mark(10)" id="mark10"></i>

                            <c:choose>
                              <c:when test="${theArticle.avgGreat > 0 }">
                                &nbsp; &nbsp; &nbsp; &nbsp;
                                <i class="fa fa-trash " aria-hidden="true" id="removeGrade"></i>
                              </c:when>
                              <c:otherwise>
                                &nbsp; &nbsp; &nbsp; &nbsp;
                                <i class="fa fa-sign-in" aria-hidden="true" id="submitGrade"></i>
                              </c:otherwise>
                            </c:choose>
                          </div>

                        </div>
                      <%}else{%>
                      <div style="margin-top: 10px;">
                        <i class="fa fa-star icon-muted starStyle" ></i>&nbsp;${theArticle.great}
                      </div>
                      <%}%>


                    </div>
                  </div>
                </div>





                <!-- 评论区 -->
                <h4 class="m-t-lg m-b">
                  <i class="fa fa-anchor" aria-hidden="true"></i>
                  &nbsp;评论
                </h4>
                <section class="comment-list block">

                  <c:forEach var="comment" items="${commentList}">

                    <article id="comment-id-1" class="comment-item">
                      <a class="pull-left thumb-sm">
                        <img src="<%=(basePath)%>${comment.headImgUrl}" class="img-circle">
                      </a>
                      <section class="comment-body m-b">
                        <header>
                          <a href="#"><strong>${comment.username}</strong></a>
                          <label class="label bg-info m-l-xs">
                            <c:choose>
                              <c:when test="${comment.role==1}">
                                教师
                              </c:when>
                              <c:when test="${comment.role==2}">
                                管理
                              </c:when>
                              <c:otherwise>
                                学生
                              </c:otherwise>
                            </c:choose>
                          </label>
                          <span class="text-muted text-xs block m-t-xs">
                            ${comment.createTime}
                        </span>
                        </header>
                        <div class="m-t-sm" style="background-color: white;border: 1px solid #ccc; padding: 6px 10px;">
                          <i class="fa fa-bell-o" aria-hidden="true"></i>
                        ${comment.content}

                          <c:if test="${fn:length(comment.subCommentList)!=0}">
                            <div class="line b-b"></div>
                          </c:if>
                        <%--子评论--%>
                        <section class="comment-list block">
                        <c:forEach var="sub" items="${comment.subCommentList}">

                          <article id="comment-id-1" class="comment-item">
                            <a class="pull-left thumb-sm">
                              <img src="<%=(basePath)%>${sub.headImgUrl}" class="img-circle">
                            </a>
                            <section class="comment-body m-b">
                              <header>
                                <a href="#"><strong>${sub.username}</strong></a>
                                <label class="label bg-info m-l-xs">
                                  <c:choose>
                                    <c:when test="${sub.role==1}">
                                      教师
                                    </c:when>
                                    <c:when test="${sub.role==2}">
                                      管理
                                    </c:when>
                                    <c:otherwise>
                                      学生
                                    </c:otherwise>
                                  </c:choose>
                                </label>
                                <span class="text-muted text-xs block m-t-xs">
                                    ${sub.createTime}
                                </span>
                              </header>
                              <div class="m-t-sm">
                                <i class="fa fa-bell-o" aria-hidden="true"></i>
                                ${sub.content}
                              </div>
                            </section>
                          </article>

                        </c:forEach>
                          </section>
                          <%--子评论--%>
                        </div>
                        <div style="float: right;font-size: 20px;width: 50px;height: 50px;text-align: right;" class="addSubComment" onclick="turnSubPage('${theArticle.id}','${comment.id}')">
                          <i class="fa fa-plus-circle" aria-hidden="true"></i>
                        </div>
                      </section>
                    </article>

                  </c:forEach>
                  <c:if test="${fn:length(commentList)==0}">
                    <article id="comment-id-1" class="comment-item">

                      <section class="comment-body m-b">
                        <header>
                          <span class="text-muted text-xs block m-t-xs">
                              暂无评论
                          </span>
                        </header>
                        <div class="m-t-sm">${comment.content}</div>
                      </section>
                    </article>
                  </c:if>



                </section>
                <!-- ／评论区 -->



                <!-- 新建一条评论 -->
                <h4 class="m-t-lg m-b" style="margin-top: 80px;">
                  <i class="fa fa-sign-language" aria-hidden="true"></i>
                  新建评论
                </h4>

                  <div class="form-group">
                    <textarea class="form-control" rows="5" placeholder="输入..." id="content"></textarea>
                  </div>
                  <div class="form-group">
                    <button id="createComment" class="btn btn-success" style="height: 30px;width: 100px">发表</button>
                  </div>
                <!-- ／新建一条评论 -->

            </div>

            <!-- 相关链接-->
            <div class="col-sm-4">
                <div class="panel panel-default" >
                  <div class="panel-heading" style="color:#707070;font-size: 16px;">
                    <i class="fa fa-bullhorn" aria-hidden="true"></i>
                    &nbsp;相关视频</div>
                  <div class="panel-body">


                    <c:forEach var="article" items="${articleList}">

                      <article class="media">

                        <div class="item">
                          <div class="padder-v">
                            <b class="text-ellipsis">
                              <i class="fa fa-tags" aria-hidden="true" style="color:black"></i>
                              &nbsp;${article.title}
                            </b>
                          </div>
                          <div class="pos-rlt">
                            <div class="bottom">
                              <span class="badge bg-info m-l-sm m-b-sm">${article.time}</span><!-- 显示视频的时间-->
                            </div>
                            <div class="item-overlay opacity r r-2x bg-black">
                              <div class="text-info padder m-t-sm text-sm">
                                <!-- 评分的五角星 不能评价的显示为0.0 可以评价的显示之后为评价好的分数-->
                                <c:choose>
                                  <c:when test="${article.great==null}">
                                    <i class="fa fa-star"></i> 待
                                  </c:when>
                                  <c:otherwise>
                                    <i class="fa fa-star"></i> ${article.great}
                                  </c:otherwise>
                                </c:choose>
                              </div>
                              <div class="center text-center m-t-n">
                                <!-- 播放键 -->
                                <a href="<%=(basePath)%>article/getDetail/${article.id}" target="body">
                                  <i class="icon-control-play i-2x"></i>
                                </a>
                              </div>
                              <div class="bottom padder m-b-sm"><!-- 点赞-->
                                <c:choose>
                                  <c:when test="${article.isChooseLike==0}">
                                    <a class="btn  pull-right" data-toggle="button" onclick="like1(${article.id})" >
                                      <i class="fa fa-heart-o text"></i>
                                      <i class="fa fa-heart text-active text-danger"></i>
                                      <span id="num1${article.id}">${article.likeNum}</span>
                                    </a>
                                  </c:when>
                                  <c:otherwise>
                                    <a class="btn  pull-right active" data-toggle="button" onclick="like2(${article.id})">
                                      <i class="fa fa-heart text-active text-danger"></i>
                                      <i class="fa fa-heart-o text"></i>
                                      <span id="num2${article.id}">${article.likeNum}</span>
                                    </a>
                                  </c:otherwise>
                                </c:choose>
                              </div>
                            </div>
                            <a href="#">
                              <c:choose>
                                <c:when test="${article.coverUrl!=null}">
                                  <img id="backImg" src="<%=(basePath)%>${article.coverUrl}" alt="" class="r r-2x img-full coverImg">
                                </c:when>
                                <c:otherwise>
                                  <img  src="${pageContext.request.contextPath}/images/m40.jpg" alt="" class="r r-2x img-full coverImg">
                                </c:otherwise>
                              </c:choose>
                            </a>
                          </div>
                          <div class="padder-v">
                            <a class="text-ellipsis text-xs text-muted">By ${article.authorName}</a><!-- 链接到上传者的主页-->
                          </div>
                          <input type="hidden" id="isChooseLike${article.id}" value="${article.isChooseLike}">

                        </div>
                        <div class="line b-b"></div>

                      </article>



                    </c:forEach>






                   <%-- <article class="media">
                      <a href="#" class="pull-left thumb-lg m-t-xs">
                        <img src="${pageContext.request.contextPath}/images/m45.jpg">
                      </a>
                      <div class="media-body">
                        <a href="#" class="font-semibold">Movie's Name</a>
                        <div class="text-xs block m-t-xs">By<a href="#">John smith</a> </div>
                      </div>
                    </article>--%>



                  </div>
                </div>
              </div>

          </div>
        <input type="hidden" id="isChooseLike" value="${theArticle.isChooseLike}">
      </section>
  </section>

  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
  <!-- App -->
  <script src="${pageContext.request.contextPath}/js/app.js"></script>
  <script src="${pageContext.request.contextPath}/js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/app.plugin.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/demo.js"></script>
  <script src="${pageContext.request.contextPath}/layer/layer.js"></script>

  <script>
    $(function () {
      var title="${theArticle.title}";
      var videoUrl="<%=(basePath)%>${theArticle.videoUrl}";
      var imgUrl="<%=(basePath)%>${theArticle.coverUrl}";

      playVideo("",videoUrl,imgUrl);


      var imgW=$("#jp_poster_0").width();
      $("#jp_poster_0").height(imgW*320/572);
      var width=$(".coverImg").width();
      $(".coverImg").attr("height",width/2);

      var barW=$(".jp-interface").width();
      //alert(barW);
      $(".jp-seek-bar").attr("width",barW-110);
      $(".jp-title").attr("width",barW-110);
      /*alert($(".jp-title")[0].style.width);
      $(".jp-play-bar").attr("width","100%");
      $(".jp-seek-bar").attr("width","100%");
      $(".jp-title").attr("width","100%");*/
    });



    $(".fa-compress").click(function () {
      var imgW=$("#jp_poster_0").width();
      $("#jp_poster_0").height(imgW*320/572);
      var width=$(".coverImg").width();
      $(".coverImg").attr("height",width/2);


    });

  </script>
  <script>

    // 点赞处理
    function like1(data) {

      //alert(data);
      var isChooseLike=$("#isChooseLike").val();
      var num=parseInt($("#num1"+data).text());
      if (isChooseLike > 0){
        $("#isChooseLike").val(0);
        $("#num1"+data).html(num-1);
      }else {
        $("#isChooseLike").val(1);
        $("#num1"+data).html(num+1);
      }
      addChangeToDataBase(data);
    }

    function like2(data) {
      //alert(data);
      var isChooseLike=$("#isChooseLike").val();
      var num=parseInt($("#num2"+data).text());
      if (isChooseLike > 0){
        $("#isChooseLike").val(0);
        $("#num2"+data).html(num-1);
      }else {
        $("#isChooseLike").val(1);
        $("#num2"+data).html(num+1);
      }
      addChangeToDataBase(data);

    }

    function addChangeToDataBase(articleId) {
      var regInfo={
        articleId:articleId
      };
      $.ajax({
        contentType:"application/json",
        url:getRootPath()+"/like/addOrRemove",
        type:"post",
        dataType:"json",
        data:JSON.stringify(regInfo),
        success:function (data) {
          if (data==0){
            layer.msg("保存失败", {time: 3000, icon:2});
          }else if (data==2){
            layer.msg("请先登录", {time: 3000, icon:2});
          }
        },
        error:function (error) {
          layer.msg('连接失败！', {time: 3000, icon:5});
        }

      });
    }
    function getRootPath() {
      var curWwwPath = window.document.location.href;
      var pathName = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathName);
      var localhostPaht = curWwwPath.substring(0, pos);
      var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
      return (localhostPaht + projectName);
    }
  </script>
  <script>
    $(function () {
      $(".addSubComment").mouseover(function () {
        layer.tips('添加子评论', $(".addSubComment"));
      });
    });
    /*添加子评论页面*/
    function turnSubPage(articleId,parentId) {
      layer.open({
        type: 2,
        title: false,
        shadeClose: true,
        shade: true,
        area: ['600px', '300px'],
        offset: 'cb', //右下角弹出
        skin: 'layui-layer-rim', //加上边框
        /*time: 2000, //2秒后自动关闭*/
        anim: 3,
        content: ['${pageContext.request.contextPath}/page/util/addSubComment.jsp?articleId='+articleId+"&parentId="+parentId, 'no'], //iframe的url，no代表不显示滚动条
      });
    }



    // 创建首级评论
    $("#createComment").click(function () {
        var content=$("#content").val();
        if (content==""){
          layer.msg('请输入您的评论！', {time: 3000, icon:5});
          return false;
        }

      var regInfo={
        articleId:${theArticle.id},
        content:content,
        parentId:0
      };
      $.ajax({
        contentType:"application/json",
        url:getRootPath()+"/comment/add",
        type:"post",
        dataType:"json",
        data:JSON.stringify(regInfo),
        success:function (data) {
          if (data.res==0){
            layer.msg(data.msg, {time: 3000, icon:2});
          }else {
            layer.msg(data.msg, {time: 3000, icon:6});
            setTimeout(function () {
              window.location.reload();
            },1000);
          }

        },
        error:function (error) {
          layer.msg('连接失败！', {time: 3000, icon:5});
        }

      });
    });


  </script>
  <script>
    // 进行评分
    $(function () {

      $("#submitGrade").mouseover(function () {
        layer.tips('提交评分', $("#submitGrade"));
      });
      $("#removeGrade").mouseover(function () {
        layer.tips('删除评分', $("#removeGrade"));
      });
      var isMark=${theArticle.avgGreat};
      if (isMark>0){
        numberStar(isMark/10);
      }

    });

    function mark(number) {
      numberStar(number);
      $("#waitGrade").html((Number(number)*10).toFixed(1));
      $("#waitStar").css("color","#FFD700");
    }


    function numberStar(number) {
      for (var i=1;i<11;i++){
        if (i<=number){
          $("#mark"+i).removeClass("fa-star-o");
          $("#mark"+i).addClass("fa-star");
          $("#mark"+i).css("color","#FFD700");
        }else {
          $("#mark"+i).removeClass("fa-star");
          $("#mark"+i).addClass("fa-star-o");
          $("#mark"+i).css("color","#939aa0");
        }
      }
    }

    //提交
    $("#submitGrade").click(function () {
      var grade=$("#waitGrade").html();
      if (grade=="" || grade=="0.0"){
        layer.msg('请先评分！', {time: 3000, icon:5});
        return false;
      }

      var regInfo={
        articleId:${theArticle.id},
        result:grade
      };

      $.ajax({
        contentType: "application/json",
        url: getRootPath() + "/grade/add",
        type: "post",
        dataType: "json",
        data: JSON.stringify(regInfo),
        success: function (data) {
          if (data.res == 0) {
            layer.msg(data.msg, {time: 3000, icon: 2});
          } else {
            layer.msg(data.msg, {time: 3000, icon: 6});
            setTimeout(function () {
              window.location.reload();
            }, 1000);
          }

        },
        error: function (error) {
          layer.msg('连接失败！', {time: 3000, icon: 5});
        }
      });
    });


    //删除
    $("#removeGrade").click(function () {
      var grade=$("#hasGrade").html();
      if (grade=="" || grade=="0.0"){
        layer.msg('您还未评分！', {time: 3000, icon:5});
        return false;
      }


    var articleId=${theArticle.id};


      $.ajax({
        contentType: "application/json",
        url: getRootPath() + "/grade/delete",
        type: "get",
        dataType: "json",
        data: "articleId="+articleId,
        success: function (data) {
          if (data.res == 0) {
            layer.msg(data.msg, {time: 3000, icon: 2});
          } else {
            layer.msg(data.msg, {time: 3000, icon: 6});
            setTimeout(function () {
              window.location.reload();
            }, 1000);
          }

        },
        error: function (error) {
          layer.msg('连接失败！', {time: 3000, icon: 5});
        }
      });
    });
  </script>
</body>
</html>